iT邦幫忙

2023 iThome 鐵人賽

DAY 21
0
Modern Web

Web互動式網頁系列 第 21

DAY21 JavaScript數組(Array)與物件(Object)

  • 分享至 

  • xImage
  •  

JS中數組(Array)與物件(Object)是用於存儲和操作數據。來探討數組和物件的基本概念和操作方法吧!

JS數組(Array)

一種有序的數據集合,每個數據項都有一個索引。
數組中的數據項可以是數字、字符串、對象等類型的數據。
使用中括號 []創建一個數組,數據項用逗號, 分隔。
範例:建立一個包含三個水果的數組,水果都有一個索引,從0開始,蘋果是0,香蕉是1,柳橙是2。

var fruits = ["蘋果", "香蕉", "柳橙"];

數組(Array)的基本操作

  • 訪問數組元素
    你可以通過索引來訪問數組中的元素。例如使用 fruits[0]來訪問數組中的第一個元素(蘋果)。
console.log(fruits[0]); // 輸出:蘋果
  • 添加元素到數組
    你可以使用 push() 方法向數組添加新元素。
fruits.push("梨");
console.log(fruits); // 輸出:["蘋果", "香蕉", "柳橙", "梨"]
  • 遍歷數組
    使用迴圈(如for迴圈或forEach方法)可以遍歷數組中的所有元素。
// 使用 for 方法
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// 使用 forEach 方法
fruits.forEach(function(fruit) {
  console.log(fruit);
});

JS物件(Object)

一種無序的數據結構,使用鍵(key)-值(value) 對來組織數據。
每個鍵(key) 都是唯一的並且用於訪問相應的值(value),建立一個物件使用大括號 {} 並定義鍵值對。
範例:建立一個包含個人資訊的物件,包括名字、年齡和城市。

var person = {
  name: "小明",
  age: 25,
  city: "台中"
};

JS物件(Object)的基本操作

  • 訪問物件屬性
    你可以使用點記號或中括號來訪問物件的屬性。
console.log(person.name); 
// 輸出:小明
console.log(person["age"]); 
// 輸出:25
  • 添加和修改屬性
    你可以添加新屬性或修改現有屬性的值。
person.job = "工程師"; 
// 添加新屬性
person.age = 26; 
// 修改年齡屬性的值
console.log(person);
  • 遍歷物件
    使用for...in循環可以遍歷物件的所有屬性。
for (var key in person) {
  console.log(key + ": " + person[key]);
}

今天介紹到這邊,感謝觀看!


上一篇
DAY20 JavaScript函數
下一篇
DAY22 JavaScript事件處理
系列文
Web互動式網頁30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言